<template>
  <div class="home">
    <router-link
      :to="{
        path: '/search',
      }"
    >
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
    /></router-link>

    <!-- 标签页 -->
    <van-tabs v-model="active" @click="switchTab">
      <van-tab :title="item.name" v-for="(item, i) in homeList" :key="item._id">
        <div class="article_list" style="padding-bottom: -50px">
          <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
            <!-- 上拉加载 -->
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="articleList"
              :immediate-check="false"
            >
              <!-- 初始化后会立刻执行一次  articleList 这个方法 -->
              <!-- loading控制是否正在加载中 -->
              <div
                class="list_item"
                v-for="item2 in home2List"
                :key="item2._id"
              >
                <router-link
                  :to="{
                    path: '/article',
                    query: { article_id: item2._id, user_id: item2.author_id },
                  }"
                >
                  <div class="title">{{ item2.title }}</div>
                  <div class="img_type2">
                    <img v-for="img in item2.imageSrc" :src="img" />
                  </div>

                  <div class="aricle_bottom">
                    <span>{{ item2.author }}</span>
                    <span>{{ item2.comment }}评论</span>
                    <span>{{ item2.time | formatDate }}</span>
                  </div>
                </router-link>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
    <van-tabbar v-model="active2">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item
        icon="add-o"
        :to="{
          path: '/publish',
        }"
        >发布</van-tabbar-item
      >
      <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
      active2: "",
      cate_id: "",
      homeList: [],
      home2List: [],
      // 上拉加载
      loading: false,
      finished: false, //是否全部加载完毕了

      skip: 0,
      limit: 20,
      isRefresh: false, //是否正在刷新
    };
  },

  mounted() {
    this.cateList();
  },
  methods: {
    // 下拉刷新功能
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.articleList(true);
    },
    // 点击切换数据
    switchTab() {
      this.cate_id = this.homeList[this.active]._id;
      // 获取到当前高亮的索引
      this.home2List = [];
      this.skip = 0;
      this.finished = false;
      this.articleList();
    },
    async cateList() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/get_cate_list",
      });
      if (res.code == 0) {
        this.homeList = res.data;
        this.cate_id = this.homeList[this.active]._id;

        this.articleList();
      }
      // this.queryInfo.cate_id = console.log(res);
    },
    async articleList(flag) {
      console.log(this.active);
      let { cate_id, skip, limit } = this;
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/get_article_list",
        params: { cate_id: cate_id, skip: skip, limit: limit },
      });

      if (flag) {
        // 如果是刷新操作
        this.isRefresh = false;
        this.home2List = res.data; // 替换为新的
      } else {
        this.home2List.push(...res.data); //累加
      }

      //结束下拉刷新的转圈
      let len = this.home2List.length;

      if (len >= res.count) {
        this.finished = true;
      } else {
        this.skip = len;
        this.loading = false;
        // 判断数据加载完了吗
        // 如果加载完了 finished=>true
        // 反之 loading   false
      }

      console.log(this.cate_id);
    },
  },
  filters: {
    formatDate(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        // let h = date.getHours(); // 时
        // h = h < 10 ? "0" + h : h;
        // let m = date.getMinutes(); // 分
        // m = m < 10 ? "0" + m : m;
        // let s = date.getSeconds(); // 秒
        // s = s < 10 ? "0" + s : s;
        // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.van-search__content {
  background-color: #66d79d;
}
.van-tabs {
  div {
    img {
      width: 300px;
    }
  }
}
.article_list {
  padding: 0 20px;
  .list_item {
    width: 100%;
    padding: 12px 0 0 0;
    .title {
      margin: 0 0 10px 0;
    }
  }
  .img_type1 {
    width: 100%;
    height: 210px;
    img {
      width: 100%;
      height: 210px;
    }
  }
  .img_type2 {
    width: 100%;
    height: 75px;
    display: flex;
    overflow: hidden;
    img {
      width: 32%;
      margin-right: 2%;
    }
  }

  .aricle_bottom {
    display: flex;
    height: 40px;
    align-items: center;
    color: #888;

    font-size: 14px;
    span {
      margin-right: 20px;
    }
  }
}
</style>


